<template>
    <div class="warpper-box">
        <a-row :gutter="24">
            <a-col :span="6">
                <a-card :bordered="true" title="权限菜单" :style="{ height: '100%' }">
                    <a-icon @click="add(-1,'add')" class="link-icon" slot="extra" type="plus-circle" />
                    <a-tree
                    defaultExpandAll
                    :tree-data="treeData">
                    <template v-slot:title="nodeData">
                        <span @click="checkTree(nodeData)">{{nodeData.menuName}}</span>
                        <span style="display: inline-block;margin-left:20px;">
                            <a-button type="link" v-if="nodeData.menuType !== 'B'" icon="plus-circle" @click="()=> add(nodeData,'add')"></a-button>
                            <a-button type="link" icon="form" @click="()=> add(nodeData,'edit')"></a-button>
                             <a-popconfirm
                                title="删除后，不能恢复，确认删除！"
                                ok-text="确认"
                                cancel-text="取消"
                                @confirm="remove(nodeData.id)" >
                                <a-button type="link" icon="delete"></a-button>
                            </a-popconfirm>
                        </span>
                    </template>
                    </a-tree>
                    <a-empty v-show="treeData.length ===0"/>
                </a-card>
            </a-col>
            <a-col :span="18">
                <a-table :columns="columns" rowKey="id" :data-source="loadData">
                    <span slot="menuStatus" slot-scope="text, record">
                        <a-popconfirm
                            :title="record.menuStatus === 1 ? '禁用状态，菜单不能使用？确认禁用！':'确认启用！'"
                            ok-text="确认"
                            cancel-text="取消"
                            @confirm="handelUserStatusChange(record)" >
                            <a-switch checked-children="启用" un-checked-children="禁用" 
                            :checked="record.menuStatus === 1 ? true : false"
                            default-checked />
                        </a-popconfirm>
                    </span>
                </a-table>
            </a-col>
        </a-row>
         <a-modal :title="title" :width="640" :visible="visible" @ok="handleOk" @cancel="visible=false">
            <form-create v-model="form.fApi" :rule="form.rule" :option="form.option"/>
        </a-modal>
    </div>
</template>

<script>
import {
     sysGetMenuTree,
     sysQueryMenuIdChildList,
     sysMenuDisable,
     sysAddMenu,
     sysEidtMenu,
     sysDelMenu
} from '@/api/manage/menus'
import { STable } from '@/components'
import {
    FORM_PARENT_MENU,
    MENU_COLUMNS,
    OPTION_BLOCK
} from './modules/form'
export default {
  name: 'MenuList',
  components: {
    STable
  },
  data () {
    return {
        form:{
            fApi:{},
            rule:[],
            option:OPTION_BLOCK
        },
        visible:false,
        title:'父级',
        id:'',
        menuParent:'',
        status:'',
        menuId:'',
        treeData:[],
        columns:MENU_COLUMNS,
        loadData:[]
    }
  },
  mounted () {
   this.initMenuTree();
  },
  methods: {
    async initMenuTree(){
        const {code,data} = await sysGetMenuTree(this.status);
        if(code === '1'){
            this.treeData = data;
            this.menuId = data[0].menuId;
             this.initMenuList()
        }
    },
    async initMenuList(){
        const {code,data} = await sysQueryMenuIdChildList(this.menuId);
        if(code === '1'){
            this.loadData = data;
        }
    },
    add(row,type){
        this.form.rule = FORM_PARENT_MENU;
        this.$nextTick(()=>{
            this.form.fApi.resetFields();
        });
        if(type==='add'){
            this.id = '';
            this.menuParent = row === -1 ? -1:row.menuId;
            this.title = row === -1 ? '新增父级':'新增子级';
        }else{
            this.id = row.id;
            this.menuParent = row.menuParent;
            this.title = row.menuParent === -1 ? '编辑父级':'编辑子级';
            this.$nextTick(()=>{
                this.form.fApi.setValue({
                    menuName:row.menuName,
                    menuIcon:row.menuIcon,
                    menuPath:row.menuPath,
                    menuType:row.menuType
                })
            })
        }
        this.visible = true;
    },
    checkTree(checkedNodes){
        this.menuId = checkedNodes.menuId;
        this.initMenuList();
    },
    async handelUserStatusChange(el){
        let params = {
            id:el.id,
            menuStatus:el.menuStatus === 1?2:1 
        }
      const {code} = await sysMenuDisable(params);
      if(code === '1'){
        this.$message.success('操作成功');
        this.initMenuList();
      }
    },
    async remove(id){
        const {code} = await sysDelMenu({id:id});
        if(code === '1'){
            this.$message.success('操作成功');
            this.initMenuTree();
            this.initMenuList();
        }
    },
    handleOk () {
        this.form.fApi.submit(async (formData, $f) => {
        try {
            if(this.id){
                formData.id = this.id;
            }
            formData.menuParent = this.menuParent;
            const {code} = this.id ? await sysEidtMenu(formData) : await sysAddMenu(formData);
            if(code === '1'){
               this.initMenuTree();
               this.visible = false;
            }
           
        } catch (error) {
          this.$message.info(JSON.stringify(error));
        }
      })
    }
  }
}
</script>


